<section id="buttons">


    <!-- Doesn't work ...
        <div class="page-header">
            <h1>Button
                <small><a href="//github.com/mgcrea/angular-strap/blob/master/src/directives/button.js" target="_blank">directives/button.js</a>
                </small>
            </h1>
        </div>
        <h2>Overview and examples</h2>

        <p>Enables databinding between a button and a scope object.</p>

        <p>Use any button/link with <code>ng-model</code> and <code>bs-button</code> attributes.</p>

        <div class="bs-docs-example">
            <pre>button: {{button | json}}</pre>
            <div class="btn-toolbar well" style="margin: 0;">
                <button type="button" class="btn btn-primary" ng-model="button.active" bs-button>Toggle me!</button>
            </div>
        </div>

        <h2 id="checkboxes">Checkboxes</h2>

        <p>Add <code>bs-buttons-checkbox</code> for checkbox-style toggling on btn-group.</p>

        <div class="bs-docs-example">
            <pre>checkbox: {{checkbox | json}}</pre>
            <div class="btn-toolbar well">
                <div class="btn-group" bs-buttons-checkbox>
                    <button type="button" class="btn" ng-model="checkbox.left">Left</button>
                    <button type="button" class="btn" ng-model="checkbox.middle">Middle</button>
                    <button type="button" class="btn" ng-model="checkbox.right">Right</button>
                </div>
            </div>
        </div>

    -->


    <h2 id="radios">Radios</h2>

    <p>Add <code>bs-buttons-radio</code> for radio-style toggling on btn-group.</p>

    <div class="bs-docs-example">
        <pre>radio: {{radio | json}}</pre>
        <div class="btn-toolbar well">
            <div class="btn-group" bs-buttons-radio>
                <button type="button" class="btn" ng-model="radio.left">Left</button>
                <button type="button" class="btn" ng-model="radio.middle">Middle</button>
                <button type="button" class="btn" ng-model="radio.right">Right</button>
            </div>
        </div>
    </div>


    <h3 id="radios-single">Radios with a single model</h3>

    <p>Add <code>bs-buttons-checkbox</code> with an <code>ng-model</code> attribute to bind your buttons to a single
        model.</p>

    <div class="bs-docs-example">
        <pre>radioValue: {{radioValue | json}}</pre>
        <div class="btn-toolbar well">
            <div class="btn-group" ng-model="radioValue" bs-buttons-radio>
                <button type="button" class="btn" value="left">Left</button>
                <button type="button" class="btn" value="middle">Middle</button>
                <button type="button" class="btn" value="right">Right</button>
            </div>
        </div>
    </div>
</section>
